<template>
	<view>
		<!-- 顶部提示 -->
		<view class="notice">
			<view class="message">
				<text>
					如果你在72小时内向她支付过
					<text class="notic">解锁私聊/查看相册</text>
					费用，则核实举报属实后，系统将退回相关费用。
				</text>
			</view>
		</view>

		<!-- 举报正文 -->
		<scroll-view scroll-y="true" class="list">
			<tipoff-types @change="typeChange"></tipoff-types>
			<!-- 文件上传 -->
			<view class="tip-img">
				<view class="tip-img-bg">
					<view class="tip-img-title">请提供相关截图，以便核实</view>
					<upload-images @changeImg="upload" :total="2" :sourceTypeIndex="1" :sizeTypeIndex="0"></upload-images>
				</view>
			</view>

			<!-- 多行输入框 -->
			<view class="tip-textarea uni-textarea">
				<view class="tip-textarea-title">补充描述</view>
				<textarea @keyboardheightchange="keyboard" :disabled="tipInfo.text.length === 200" v-model="tipInfo.text" placeholder="选填最多200字"></textarea>
				<view v-show="!buttonFlag" class="count">({{ tipInfo.text.length }}/200)</view>
			</view>
		</scroll-view>
		<button @tap="tipoff" v-show="buttonFlag" plain="true" class="flexButton">完成</button>
	</view>
</template>

<script>
import uploadImages from '../../components/common/upload-images.vue';
import tipoffTypes from '../../components/tipoff/tipoff-types.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		uploadImages,
		tipoffTypes
	},
	data() {
		return {
			buttonFlag: true,
			tmpImg: [],
			tipInfo: {
				userId: 0,
				text: '',
				type: ''
			}
		};
	},
	methods: {
		typeChange(typeText) {
			this.tipInfo.type = typeText;
		},
		keyboard(event) {
			if (event.detail.height > 0) {
				this.buttonFlag = false;
			} else {
				this.buttonFlag = true;
			}
		},
		upload(imgs) {
			this.tmpImg = imgs;
		},
		tipoff() {
			if (!this.tipInfo.type) {
				showToast('请选择举报原因');
				return;
			}
			uni.showLoading({
				title:'提交中',
				mask: true
			});
			if (this.tmpImg.length > 0) {
				this.up();
			} else {
				this.submit();
			}
		},
		up() {
			let imgsData = [];
			this.tmpImg.forEach((imgurl, index) => {
				imgsData.push({
					name: `file${index}`,
					uri: imgurl
				});
			});
			let user = uni.getStorageSync(constant.user);
			uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.uploadNotCh,
				files: imgsData,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`
				},
				success: res => {
					console.log(res);
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						this.submit(data.data);
					} else {
						uni.hideLoading();
						showToast(data.msg);
					}
				},
				fail(e) {
					console.log(e);
				}
			});
		},
		submit(urls) {
			let dataSet = {
				tipOffId: this.tipInfo.userId,
				reportedReason: `${this.tipInfo.type},${this.tipInfo.text}`
			};
			if (urls) {
				let imgs = urls.join(',');
				dataSet.reportedImg = imgs;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.tipOff,
				data: dataSet,
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (res.data.data) {
							uni.hideLoading();
							showToast('举报已成功受理');
						} else {
							uni.hideLoading();
							showToast(res.data.msg);
						}
					} else {
						uni.hideLoading();
						showToast(res.data.msg);
					}
				},
				fail(r) {
					uni.hideLoading();
				}
			});
		}
	},
	onLoad(options) {
		this.tipInfo.userId = options.userId;
	}
};
</script>

<style lang="less">
.notice {
	background-color: #eff0f2;
	padding-bottom: 20rpx;

	.message {
		padding: 20rpx 40rpx;
		font-size: 25rpx;
		line-height: 32rpx;
		color: #1e1e1e;
		background-color: #ffffff;
		.notic {
			margin: 0 10rpx;
			color: #f85f8f;
		}
	}
}

//图片
.tip-img {
	background-color: #eff0f2;
	padding-bottom: 20rpx;

	.tip-img-bg {
		background-color: #ffffff;
	}
	.tip-img-title {
		font-size: 30rpx;
		padding: 15rpx 40rpx 0;
		font-weight: 700;
	}
}

.tip-textarea {
	padding: 0 40rpx;
	position: relative;

	.tip-textarea-title {
		font-size: 30rpx;
		font-weight: 700;
		margin: 15rpx 0;
	}
	textarea {
		width: 87%;
		padding: 0;
		height: 275rpx;
	}

	.count {
		position: absolute;
		bottom: 0;
		right: 18%;
		color: #8d8b8c;
	}
}
.flexButton {
	position: fixed;
	bottom: 20rpx;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #fcb5b9, #ff7ea5) !important;
	color: #ffffff;
	border: 0 !important;
	border-radius: 40rpx !important;
}
</style>
